<template>
<div>
  <el-dialog title="发布需求" :visible.sync="dialogFormVisible">
    <span>填写说明：<br/>
    填写您的需求，epai工作人员将第一时间联系您，为您分忧解难。</span>
    <el-divider></el-divider>
    <el-form :model="form">
      <span>请选择商品类型：</span>
      <el-radio-group @change="findCid" v-model="typeName" size="medium">
        <el-radio-button label="手机" ></el-radio-button>
        <el-radio-button label="平板电脑"></el-radio-button>
        <el-radio-button label="3C数码"></el-radio-button>
        <el-radio-button label="其他"></el-radio-button>
      </el-radio-group>
      <input type="hidden" v-model="cid">
      <el-divider></el-divider>
      <span>请选择商品品牌：</span>
      <el-select v-model="detail.token" placeholder="请选择品牌">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <br/>
      <span style="line-height: 60px">请选择商品成色：</span>
      <el-radio-group v-model="detail.appearance">
        <el-radio :label="1">全新</el-radio>
        <el-radio :label="2">99新</el-radio>
        <el-radio :label="3">95新</el-radio>
        <el-radio :label="4">其他</el-radio>
      </el-radio-group>
      <br/>
      <span style="line-height: 60px">是否维修：</span>
      <el-radio-group v-model="detail.checkedOut" style="margin-left: 42px">
        <el-radio :label="1">是</el-radio>
        <el-radio :label="2">否</el-radio>
      </el-radio-group>
      <el-divider></el-divider>
      <span>请填写商品信息：</span><br/>
      <el-form-item style="margin-top: 20px" label="商品名称" :label-width="formLabelWidth">
        <el-input v-model="form.productName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="商品介绍" :label-width="formLabelWidth">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请在100字以内"
              v-model="form.introduce">
          </el-input>
      </el-form-item>
      <span style="margin-top: 20px;margin-left: 51px">上传图片</span>
      <el-form-item>
      <el-upload
          style="margin-top: 30px;margin-left: 121px"
          class="upload-demo"
          ref="upload"
          action="#"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :headers="headers"
          :on-change="handleChange"
          :file-list="fileList"
          :limit="1"
          list-type="picture"
          :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="uploadPic">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

        <input type="hidden" v-model="form.image"/>
        <input type="hidden" v-model="form.parId">
        <span style="margin-top: 20px;margin-left: 51px">选择模式：</span>
        <el-radio-group v-model="mode">
          <el-radio label="会场模式">会场模式</el-radio>
          <el-radio label="秒杀">秒杀模式</el-radio>
        </el-radio-group>
        <br/>
        <span style="margin-top: 20px;margin-left: 51px">出售金额：</span>
        <el-input
            style="width: 200px"
            placeholder="请输入出售金额"
            prefix-icon="el-icon-coin"
            v-model="record.basePrice">
        </el-input>
      </el-form-item>
    </el-form>


    <div slot="footer" class="dialog-footer">
      <el-button @click="c">取 消</el-button>
      <el-button type="primary" @click="addProduct()">发 布</el-button>
    </div>
  </el-dialog>

</div>
</template>
<style>

.el-input {
  width: 35px;
}
</style>

<script>
export default {
  props:["dialogFormVisible",]
  ,
  data() {
    return {
      typeName:'',
      pic:'',
      cid:'',
      mode:'',
      //图片返回
      headers:{
        'Content-Type': 'multipart/form-data',
      },
      //品牌类别
      options: [{
        value: '华为',
        label: '华为'
      }, {
        value: '小米',
        label: '小米'
      }, {
        value: '苹果',
        label: '苹果'
      }, {
        value: 'oppo',
        label: 'oppo'
      }, {
        value: 'vivo',
        label: 'vivo'
      },{
        value: '其他',
        label: '其他'
      }],

      fileList: [],
      activeIndex: '1',
      //商品表单
      form: {
        productName:'',
        image:'',
        mode:'',
        parId:'',
        cid:'',
        introduce:'',
      },
      //商品详情表单
      detail:{
        token: '',
        appearance:1,
        checkedOut:1,
        cid:'',
      },
      record:{
        basePrice:'',
        pid:'',
        mode:''
      },
      formLabelWidth: '120px'
    };
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleChange(file,fileList){
      this.fileList = fileList;
    },
    handlePreview(file) {
      console.log(file);
    },
    c(){
      this.$emit('closeTab',false)
    },
    findCid(value){
      this.$ax.get("/epai/classify/findClassityid",{params:{
        typeName:value
        }})
      .then(response=>{
        if(response.data.success){
          this.cid = response.data.data
        }
      })
      console.log(value);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最大限制上传1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    addProduct(){
      this.detail.cid = this.cid
      this.form.cid = this.cid
      this.form.mode = this.mode
      this.$ax.post("/epai/product-parameter/addProductParameter",this.detail)
      .then(response=>{
        if(response.data.success){
          this.form.parId = response.data.data
          this.$ax.post("/epai/product/addProduct",this.form)
          .then(response1=>{
            if(response1.data.success){
                this.record.pid = response1.data.data
              this.record.mode = this.mode
                this.$ax.post("/epai/product-record/addProductRecord",this.record)
              .then(response2=>{
                    if(response2.data.success){
                      this.$notify({
                        title: '发布等待审核',
                        messagae: response1.data.message,
                        type: 'success',
                        druiation: 1000
                      })
                      this.c();
                    }else {
                      this.$notify({
                        title: '发布失败',
                        messagae: response1.data.message,
                        type: 'error',
                        druiation: 3000
                      })
                    }
              })
              .catch(error=>{
                console.log(error)
              })
            }else {
              this.$notify({
                title: '发布失败',
                messagae: response1.data.message,
                type: 'error',
                druiation: 3000
              })
            }
          })
          .catch(error=>{
            console.log(error)
          })
        }else {
          console.log(response.data)
        }
      })
      .catch(error=>{
        console.log(error);
      })
      // console.log(this.form);
    },
    //上传图片
    uploadPic(){
      console.log(this.fileList);
      let parpam = new FormData();
      this.fileList.forEach(
          (val,index)=>{
            parpam.append("file",val.raw);
      }
      );
      this.$ax.post("/upload",parpam)
          .then(response=>{
            if(response.data.success){
              this.$notify({
                title: '上传成功',
                messagae: response.data.message,
                type: 'success',
                druiation: 1000
              })
              this.form.image = response.data.data
              this.$refs.upload.clearFiles();
            }else {
              this.$notify({
                title: '上传失败',
                messagae: response.data.message,
                type: 'error',
                druiation: 1000
              })
            }
          })
      .catch(error=>{
        console.log(error);
      })
    },

  }
};
</script>